<template>
  <div class="mv-container">
    <h2 @click="$router.back()">&lt; MV 详情</h2>
    <div class="video-box">
      <video :src="mvUrl" width="800" height="450" controls></video>
    </div>
    <div class="artist">
      <div class="artist-item" v-for="item in mvDetail.artists" :key="item.id">
        <span> {{ item.name }} </span>
        <i v-if="item.id !== mvDetail.artists[mvDetail.artists.length - 1].id">/</i>
      </div>
    </div>
    <div class="title">
      <div class="name">
        <h4>{{ mvDetail.name }}</h4>
        <i ref="showDescRef" class="el-icon-caret-bottom" @click="showDesc"></i>
      </div>
      <span>发布：{{ mvDetail.publishTime }}</span>
      <span>播放：{{ mvDetail.playCount | change }}次</span>
    </div>
    <div class="tags">
      <span v-for="item in mvDetail.videoGroup" :key="item.id">{{ item.name }}</span>
    </div>
    <div class="desc" v-show="showDescState">{{ mvDetail.desc }}</div>
  </div>
</template>

<script>
import { getMvByIdAPI, getMvUrlByIdAPI } from '@/api/mvAPI.js'

export default {
  name: 'Mv',
  data() {
    return {
      id: this.$route.query.id,
      mvDetail: [],
      mvUrl: '',
      showDescState: false
    }
  },
  created() {
    this.initMvDetailList()
    this.initMvUrl()
  },
  methods: {
    // 获取 mv 数据
    async initMvDetailList() {
      const { data: res } = await getMvByIdAPI(this.id)
      this.mvDetail = res.data
    },
    // 获取 mvUrl
    async initMvUrl() {
      const { data: res } = await getMvUrlByIdAPI(this.id)
      this.mvUrl = res.data.url
    },
    showDesc() {
      this.showDescState = !this.showDescState
      if (this.showDescState) {
        this.$refs.showDescRef.className = 'el-icon-caret-top'
      } else {
        this.$refs.showDescRef.className = 'el-icon-caret-bottom'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mv-container {
  margin: 0 auto;
  width: 800px;
  h2 {
    text-align: left;
    margin: 10px;
    font-size: 16px;
    color: #373737;
    cursor: pointer;
  }
  .video-box {
    margin: 0 auto;
    width: 800px;
    background-color: #000;
  }
  .artist {
    margin: 10px;
    text-align: left;
    font-size: 14px;
    color: #676767;
    .artist-item {
      display: inline;
      span {
        cursor: pointer;
        &:hover {
          color: #373737;
        }
      }
    }
  }
  .title {
    margin: 10px;
    text-align: left;
    .name {
      position: relative;
      h4 {
        font-size: 20px;
        color: #373737;
      }
      i {
        position: absolute;
        top: 4px;
        right: 0;
        font-size: 18px;
        cursor: pointer;
      }
    }
    span {
      display: inline-block;
      margin-top: 10px;
      margin-right: 20px;
      font-size: 12px;
      color: #cfcfcf;
    }
  }
  .tags {
    text-align: left;
    margin: 10px;
    span {
      margin-right: 5px;
      padding: 0 5px;
      height: 20px;
      font-size: 14px;
      background-color: #f7f7f7;
      border-radius: 10px;
      cursor: pointer;
    }
  }
  .desc {
    margin: 10px;
    text-align: left;
    font-size: 13px;
  }
}
</style>
